<template>
  <div class="airspaceApplication">
    <div class="container">
      <div class="up-container">
        <el-button
          class="createAirspace"
          icon="Plus"
          @click="handleAddType"
          v-hasPermi="['airspace:airspaceType:add']"
          >{{ $t("airspaceType.addAirspaceType") }}</el-button
        >
      </div>
      <div class="down-container">
        <el-table
          :data="tableData"
          stripe
          :border="true"
          style="width: 100%"
          max-height="60vh"
        >
          <el-table-column
            :label="$t('airspaceType.operate')"
            width="300"
            align="center"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleDetail(scope.row)"
                v-hasPermi="['system:role:edit']"
                >{{ $t("airspaceType.detail") }}</el-button
              >
              <el-button
                link
                type="primary"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:role:edit']"
                >{{ $t("airspaceType.update") }}</el-button
              >
              <el-button
                link
                type="primary"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:role:remove']"
                style="color: red"
                >{{ $t("airspaceType.delete") }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('airspaceType.airspaceTypeName')"
            :show-overflow-tooltip="true"
            prop="airTypeName"
            align="center"
          />
          <el-table-column :label="$t('airspaceType.color')" align="center">
            <template #default="{ row }">
              <div
                class="colorBox"
                :style="{
                  backgroundColor: row.fullColor,
                  border: '2px solid' + row.lineColor,
                }"
              ></div>
            </template>
          </el-table-column>
          <!--  是否管制空域  -->
          <el-table-column
            :label="$t('airspaceType.controlAirspace')"
            prop="controlStatus"
            align="center"
          >
            <template #default="{ row }">
              <span class="tag success" v-if="row.controlStatus === 1">{{
                $t("airspaceType.controlYes")
              }}</span>
              <span class="tag info" v-if="row.controlStatus === 0">{{
                $t("airspaceType.controlNo")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('airspaceType.status')"
            prop="status"
            align="center"
          >
            <template #default="{ row }">
              <span class="tag info" v-if="row.status === 0">{{
                $t("airspaceType.deactivate")
              }}</span>
              <span class="tag success" v-if="row.status === 1">{{
                $t("airspaceType.enable")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('airspaceType.updateTime')"
            prop="updateTime"
            align="center"
          />
        </el-table>
      </div>
    </div>

    <!-- 删除 -->
    <el-dialog
      class="convention"
      v-model="dialogVisible"
      title=""
      width="26%"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      top="1vh"
    >
      <img src="@/assets/images/warn.png" alt="" />
      <template #footer>
        <div class="dialog-footer">
          <div style="margin-bottom: 30px; font-size: 14px; color: #333333">
            {{ $t("airspaceType.confirmDelete") }}
            <span style="color: rgba(255, 195, 0, 1)">{{ deleteTitle }}</span>
            {{ $t("airspaceType.doubt") }}
          </div>
          <el-button @click="dialogVisible = false">{{
            $t("airspaceType.cancellation")
          }}</el-button>
          <el-button
            style="background: #2bc17b; color: #ffffff"
            @click="dialogVisibleConfirm"
          >
            {{ $t("airspaceType.determine") }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!--  删除二次确认  -->
    <el-dialog
      class="convention"
      v-model="dialogVisibleAgain"
      title=""
      width="26%"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      top="1vh"
    >
      <img src="@/assets/images/warn.png" alt="" />
      <template #footer>
        <div class="dialog-footer">
          <div style="margin-bottom: 30px; font-size: 14px; color: #333333">
            {{ $t("airspaceType.confirmDeleteAgain") }}
          </div>
          <el-button @click="dialogVisibleAgain = false">{{
            $t("airspaceType.cancellation")
          }}</el-button>
          <el-button
            style="background: #2bc17b; color: #ffffff"
            @click="dialogVisibleAgain = false"
          >
            {{ $t("airspaceType.determine") }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新建空域 -->
    <el-dialog
      class="addAirSpaceTypeVisible"
      v-model="addAirSpaceTypeVisible"
      title=""
      width="26%"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      top="1vh"
    >
      <template #header>
        <div class="title">{{ airSpaceTitle }}</div>
      </template>
      <el-form
        :model="airSpaceData"
        ref="addAirSpaceTypeRef"
        :rules="airSpaceTypeRules"
      >
        <el-form-item :label="$t('airspaceType.addName')" prop="airTypeName">
          <el-input
            v-model="airSpaceData.airTypeName"
            :placeholder="$t('airspaceType.dimensionAirspaceName')"
            clearable
            :disabled="onlyViewable"
            :maxlength="20"
          />
        </el-form-item>
        <el-form-item :label="$t('airspaceType.fullColor')" prop="fullColor">
          <el-input v-model="airSpaceData.fullColor" style="display: none" />
          <div class="colorFullBox" ref="fullColorStyle"></div>
          <div class="createBtn" v-if="!onlyViewable">
            <div class="colorChangeTitle">
              <img src="@/assets/images/choice.png" alt="" />{{
                $t("airspaceType.choice")
              }}
            </div>
            <el-color-picker
              v-model="fullColorChange"
              @change="changeColor('full')"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('airspaceType.lineColor')" prop="lineColor">
          <el-input v-model="airSpaceData.lineColor" style="display: none" />
          <div
            class="colorLineBox"
            ref="lineColorStyle"
            :style="{
              border: montageColor ? montageColor : '1px #2BC17B solid',
            }"
          ></div>
          <div class="createBtn" v-if="!onlyViewable">
            <div class="colorChangeTitle">
              <img src="@/assets/images/choice.png" alt="" />{{
                $t("airspaceType.choice")
              }}
            </div>
            <el-color-picker
              v-model="lineColorChange"
              @change="changeColor('line')"
            />
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('airspaceType.controlAirspace')"
          prop="controlStatus"
        >
          <el-select
            v-model="airSpaceData.controlStatus"
            :placeholder="$t('airspaceType.dimensionControlAirspace')"
            clearable
            :disabled="onlyViewable"
          >
            <el-option
              v-for="dict in controlAirspaceList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('airspaceType.type')" prop="status">
          <el-select
            v-model="airSpaceData.status"
            :placeholder="$t('airspaceType.dimensionAirspaceStatus')"
            clearable
            :disabled="onlyViewable"
          >
            <el-option
              v-for="dict in statusSwitch"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('airspaceType.remark')">
          <el-input
            v-model="airSpaceData.remark"
            :placeholder="$t('airspaceType.dimensionRemark')"
            :disabled="onlyViewable"
            show-word-limit
            style="height: 100px"
            maxlength="50"
            :rows="3"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="addAirSpaceTypeVisible = false"
            v-if="!onlyViewable"
            >{{ $t("airspaceType.cancellation") }}</el-button
          >
          <el-button
            style="background: #2bc17b; color: #ffffff"
            @click="addAirSpaceTypeConfirm(addAirSpaceTypeRef)"
            v-if="!onlyViewable"
          >
            {{ $t("airspaceType.determine") }}
          </el-button>
          <el-button
            @click="addAirSpaceTypeVisible = false"
            v-if="onlyViewable"
            >{{ $t("airspaceType.return") }}</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!--  详情  -->
    <el-dialog
      class="addAirSpaceTypeVisible"
      v-model="addAirSpaceTypeVisibleDetail"
      title=""
      width="26%"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      top="1vh"
    >
      <template #header>
        <div class="title">{{ airSpaceTitle }}</div>
      </template>
      <el-form :model="airSpaceDataDetail" ref="addAirSpaceTypeDetail">
        <el-form-item :label="$t('airspaceType.addName')" prop="airTypeName">
          <el-input
            v-model="airSpaceDataDetail.airTypeName"
            :placeholder="$t('airspaceType.dimensionAirspaceName')"
            clearable
            :disabled="onlyViewable"
          />
        </el-form-item>
        <el-form-item :label="$t('airspaceType.fullColor')" prop="fullColor">
          <div class="colorFullBox" ref="fullColorStyleDetail"></div>
        </el-form-item>
        <el-form-item :label="$t('airspaceType.lineColor')" prop="lineColor">
          <div
            class="colorLineBox"
            ref="lineColorStyle"
            :style="{
              border: montageColorDetail
                ? montageColorDetail
                : '1px #2BC17B solid',
            }"
          ></div>
        </el-form-item>
        <el-form-item
          :label="$t('airspaceType.controlAirspace')"
          prop="controlStatus"
        >
          <el-select
            v-model="airSpaceData.controlStatus"
            :placeholder="$t('airspaceType.dimensionControlAirspace')"
            clearable
            :disabled="onlyViewable"
          >
            <el-option
              v-for="dict in controlAirspaceList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('airspaceType.type')" prop="status">
          <el-select
            v-model="airSpaceDataDetail.status"
            :placeholder="$t('airspaceType.dimensionAirspaceStatus')"
            clearable
            :disabled="onlyViewable"
          >
            <el-option
              v-for="dict in statusSwitch"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('airspaceType.remark')">
          <el-input
            v-model="airSpaceDataDetail.remark"
            :placeholder="$t('airspaceType.dimensionRemark')"
            :disabled="onlyViewable"
            show-word-limit
            style="height: 100px"
            maxlength="150"
            :rows="3"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addAirSpaceTypeVisibleDetail = false">{{
            $t("airspaceType.return")
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="airsapceType">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import {
  getList,
  addAirSpaceType,
  editAirSpaceType,
  getAirSpaceDetail,
  deleteAirSpace,
} from "@/api/airSpace/airSpaceType";
import { ElFormItem, ElInput, ElMessage } from "element-plus";
import { getCurrentInstance } from "vue";
const { $t } = getCurrentInstance().proxy;
const { proxy } = getCurrentInstance();
const fullColorStyle = ref();
const fullColorStyleDetail = ref();
const lineColorStyle = ref();
const dialogVisible = ref(false);
const dialogVisibleAgain = ref(false);
const addAirSpaceTypeVisible = ref(false);
const addAirSpaceTypeVisibleDetail = ref(false);
const montageColor = ref("");
const montageColorDetail = ref("");
const operateType = ref("");
const addAirSpaceTypeRef = ref("");
const addAirSpaceTypeDetail = ref("");
const onlyViewable = ref(false);
const airSpaceTitle = ref("");
const deleteId = ref("");
const deleteTitle = ref("");
const fullColorChange = ref("rgba(43, 193, 123, 0.3)");
const lineColorChange = ref("#2BC17B");
const statusSwitch = [
  {
    label: "启用",
    value: 1,
  },
  {
    label: "停用",
    value: 0,
  },
];

const controlAirspaceList = [
  {
    label: "是",
    value: 1,
  },
  {
    label: "否",
    value: 0,
  },
];

const data = reactive({
  airSpaceData: {
    airTypeId: "",
    airTypeName: "",
    fullColor: "",
    lineColor: "",
    controlStatus: null,
    status: null,
    remark: "",
    updateBy: "",
    updateTime: "",
    createBy: "",
    createTime: "",
  },
  airSpaceDataDetail: {
    airTypeId: "",
    airTypeName: "",
    fullColor: "",
    lineColor: "",
    controlStatus: null,
    status: null,
    remark: "",
    updateBy: "",
    updateTime: "",
    createBy: "",
    createTime: "",
  },
  airSpaceTypeRules: {
    airTypeName: [
      { required: true, message: "请输入空域类型名称", trigger: "change" },
    ],
    fullColor: [
      { required: true, message: "请选择填充颜色", trigger: "change" },
    ],
    lineColor: [
      { required: true, message: "请选择线段颜色", trigger: "change" },
    ],
    status: [{ required: true, message: "请选择空域状态", trigger: "change" }],
    controlStatus: [
      { required: true, message: "请选择是否管制空域", trigger: "change" },
    ],
  },
});

const { airSpaceData, airSpaceDataDetail, airSpaceTypeRules } = toRefs(data);

const tableData = ref([]);

watch(montageColor, (newVal, oldVal) => {}, {
  immediate: true,
});

function changeColor(val) {
  console.log(fullColorChange.value);
  console.log(lineColorChange.value);
  if (val == "full") {
    airSpaceData.value.fullColor = fullColorChange.value;
    fullColorStyle.value.style.backgroundColor = fullColorChange.value;
  }
  if (val == "line") {
    montageColor.value = "1px solid " + lineColorChange.value;
    airSpaceData.value.lineColor = lineColorChange.value;
  }
}

function initData() {
  getList().then((response) => {
    if (response.code === 200) {
      tableData.value = response.data;
    }
  });
}
// 详情按钮
const handleDetail = (row) => {
  operateType.value = "detail";
  onlyViewable.value = true;
  addAirSpaceTypeVisibleDetail.value = true;
  airSpaceTitle.value = $t("airspaceType.airsapceTypeDetail");
  getAirSpaceDetail(row.airTypeId).then((response) => {
    if (response.code === 200) {
      console.log(response);
      airSpaceDataDetail.value = reactive(response.data);
      fullColorStyleDetail.value.style.backgroundColor =
        airSpaceDataDetail.value.fullColor;
      montageColorDetail.value =
        "1px solid " + airSpaceDataDetail.value.lineColor;
      airSpaceDataDetail.value.lineColor = response.data.lineColor;
      if (response.data.remark == "")
        airSpaceDataDetail.value.remark = "暂无数据";
    }
  });
};
// 修改按钮
const handleUpdate = (row) => {
  operateType.value = "update";
  onlyViewable.value = false;
  addAirSpaceTypeVisible.value = true;
  airSpaceTitle.value = $t("airspaceType.updateAirsapceType");
  getAirSpaceDetail(row.airTypeId)
    .then((response) => {
      if (response.code === 200) {
        airSpaceData.value = response.data;
        fullColorStyle.value.style.backgroundColor =
          airSpaceData.value.fullColor;
        montageColor.value = "1px solid " + airSpaceData.value.lineColor;
      } else {
        ElMessage.error("该类型正在被引用！");
      }
    })
    .catch(() => {});
};
// 删除按钮
const handleDelete = (row) => {
  dialogVisible.value = true;
  deleteId.value = row.airTypeId;
  deleteTitle.value = row.airTypeName;
};

// 确认删除
async function dialogVisibleConfirm() {
  dialogVisible.value = false;
  let obj = {};
  await getAirSpaceDetail(deleteId.value).then((res) => {
    if (res.code === 200) {
      console.log(res.data);
      obj = res.data;
    }
  });
  let params = {
    ...obj,
    status: "-1",
  };
  await editAirSpaceType(params)
    .then((response) => {
      if (response.code === 200) {
        if (response.data === 0) {
          dialogVisibleAgain.value = true;
        } else {
          ElMessage.success($t("airspaceType.deleteSuccess"));
          initData();
        }
      }
    })
    .catch(() => {});
}

// 新增按钮
const handleAddType = () => {
  operateType.value = "add";
  onlyViewable.value = false;
  addAirSpaceTypeVisible.value = true;
  airSpaceTitle.value = $t("airspaceType.addAirsapceType");
  reset();
  resetForm();
};

/** 表单重置 */
function reset() {
  if (fullColorStyle.value)
    fullColorStyle.value.style.backgroundColor = "rgba(43, 193, 123, 0.3)";
  montageColor.value = "1px #2BC17B solid";
  airSpaceData.value = {
    airTypeId: "",
    airTypeName: "",
    fullColor: "",
    lineColor: "",
    status: null,
    remark: "",
    updateBy: "",
    updateTime: "",
    createBy: "",
    createTime: "",
  };
}

function resetForm() {
  if (!addAirSpaceTypeRef.value) return;
  addAirSpaceTypeRef.value.resetFields();
}

// 新建/修改空域
const addAirSpaceTypeConfirm = async (addAirSpaceTypeRef) => {
  if (!addAirSpaceTypeRef) return;
  await addAirSpaceTypeRef.validate((valid, fields) => {
    if (valid) {
      if (operateType.value === "add") {
        addAirSpaceType(airSpaceData.value).then((response) => {
          if (response.code === 200) {
            ElMessage.success($t("airspaceType.addAirsapceTypeSuccess"));
            addAirSpaceTypeVisible.value = false;
            initData();
          }
        });
      } else if (operateType.value === "update") {
        console.log(airSpaceData.value);
        editAirSpaceType(airSpaceData.value).then((response) => {
          if (response.code === 200) {
            ElMessage.success($t("airspaceType.updateAirsapceTypeSuccess"));
            addAirSpaceTypeVisible.value = false;
            initData();
          }
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

onMounted(() => {
  initData();
});
</script>
<style lang="scss" scoped>
.airspaceApplication {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;

    .up-container {
      position: absolute;
      right: -39px;
      top: -45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 160px;
      height: 40px;

      .createAirspace {
        width: 120px;
        height: 34px;
        color: #ffffff;
        border-radius: 4px;
        background: #2bc17b;
        border: 1px solid #2bc17b;
        font-size: 14px;
      }
    }
    .down-container {

      .colorBox {
        width: 30px;
        height: 30px;
        border: 2px solid;
        border-radius: 15px;
      }
      .tag {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 15px;
        color: rgba(153, 153, 153, 1);
        border: 1px solid rgba(153, 153, 153, 1);
      }
      .tag.warning {
        color: rgba(255, 149, 18, 1);
        border: 1px solid rgba(255, 149, 18, 1);
      }
      .tag.success {
        color: rgba(43, 193, 123, 1);
        border: 1px solid rgba(43, 193, 123, 1);
      }
    }
    .el-table__footer-wrapper,
    .el-table__header-wrapper {
      background-color: #f4f4f4;
      height: 56px;
    }

    .el-table__header {
      height: 100%;
      background-color: #f4f4f4;
    }

    .el-table .el-table__cell {
      text-align: center;
      font-size: 16px;
      font-weight: 400;
    }

    .el-table__body td.el-table__cell {
      font-size: 14px;
    }

    .el-table td.el-table__cell div {
      div {
        margin: 0 auto;
      }
    }

    .el-table__row {
      height: 60px;
    }

    .el-table tr {
      height: 56px;
    }
  }
  .convention {
    position: relative;
    top: 30%;
  }
  :deep .el-dialog__body {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 20px !important;
  }
  :deep .el-dialog__footer {
    padding-top: 0;
  }
  :deep .dialog-footer {
    :deep .el-button:nth-child(1) {
      border-color: #ededed;
    }
  }
  :deep .el-button {
    width: 81px;
    height: 32px;
    font-size: 14px;
  }
  .addAirSpaceTypeVisible {
    width: 559px;
    height: 484px;
    position: relative;
    top: 20%;

    .colorFullBox {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      background-color: rgba(43, 193, 123, 0.3);
    }

    .colorLineBox {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      border: 1px #2bc17b solid;
    }

    .createBtn {
      display: flex;
      justify-content: center;
      align-items: center;
      //padding: 10px 26px;
      width: 98px;
      height: 36px;
      font-size: 12px;
      box-sizing: border-box;
      border-radius: 4px;
      color: rgba(43, 193, 123, 1);
      background: rgba(51, 151, 255, 0.03);
      border: 1px solid rgba(43, 193, 123, 1);
      cursor: pointer;
      margin-left: 12px;
      &:hover {
        background: rgba(51, 151, 255, 0.1);
      }

      .colorChangeTitle {
        width: 100px;
        position: fixed;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 25px;
        pointer-events: none;
      }
    }

    .title {
      height: 100%;
      background-color: #2BC17B;
      color: #ffffff;
      text-align: left;
      padding: 15px 28px;
      font-size: 18px;
      letter-spacing: 1px;
    }
  }

  :deep .el-dialog__header {
    padding: 0;
    margin: 0;
    height: 12%;
  }

  :deep .el-textarea__inner {
    height: 100%;
    resize: none;
  }

  :deep .el-dialog__body {
    padding: 25px 30px 20px !important;
    :deep .el-form {
      width: 100%;
      :deep .el-select {
        width: 100%;
      }
      :deep .el-form-item--default .el-form-item__label {
        height: 32px;
        line-height: 32px;
        width: 20%;
        /* border: 1px red solid; */
        color: #666666;
        font-weight: 400;
        font-size: 14px;
      }
    }
  }

  :deep .el-dialog__header {
    padding: 0;
    margin: 0;
    height: 12%;
  }

  :deep .el-dialog:not(.is-fullscreen) {
    margin-top: 16vh !important;
  }

  :deep .el-form {
    width: 100%;
  }

  :deep .el-form-item--default .el-form-item__label {
    //border: 1px red solid;
    font-weight: 400;
    width: 26%;
  }

  :deep .el-color-picker__trigger {
    opacity: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 34px;
    width: 96px;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    font-size: 0;
    position: relative;
    cursor: pointer;
  }

  :deep .el-dialog__headerbtn{
    position: absolute;
    top: 3px;
    right: 0;
    padding: 0;
    width: 54px;
    height: 54px;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 31px;
    color: #ffffff;
  }

  :deep .el-dialog__headerbtn .el-dialog__close{
    color: #ffffff;
  }
}
</style>
